<template>
  <van-popup
    v-model="show"
    position="bottom"
  >
    <van-picker
      show-toolbar
      :title="title"
      :columns="columns"
      @change="change"
      @confirm="confirm"
      @cancel="cancel"
    />
  </van-popup>
</template>

<script>

import { Popup, Picker } from 'vant'

export default {
  name: 'CfSelect',
  components: {
    [Popup.name]: Popup,
    [Picker.name]: Picker
  },
  props: {
    title: { // 选择器标题
      type: String, require: false, default: '选择元素'
    },
    popShow: { // 显示控制标识
      type: Boolean, require: false, default: false
    },
    options: { // 选项
      type: Array, require: true, default: () => []
    },
    selectChange: {
      type: Function, require: true, default: () => { }
    },
    selectCancel: {
      type: Function, require: true, default: () => { }
    },
    selectConfirm: {
      type: Function, require: true, default: () => { }
    }
  },
  data () {
    return {

    }
  },
  computed: {
    columns () {
      return this.options.map(i => i.label)
    },
    show: {
      get () {
        return this.popShow
      },
      set (val) {
        this.$emit('pop-change', val)
      }
    }
  },
  watch: {

  },
  methods: {
    confirm (val, idx) {
      this.$emit('pop-change', false)
      this.selectConfirm(this.options[idx].value)
    },
    change (picker, val, idx) {
      this.selectChange(this.options[idx].value)
    },
    cancel () {
      this.$emit('pop-change', false)
      this.selectCancel()
    }
  }

}
</script>

<style>
</style>
